<template>
  <div ref="find" class="find">
    <my-head :right="true">
        <div class="search" @click="gotoSearch">
            <div class="search_form">
                <van-icon color="#3a3a3a" size="18" class="icon" name="search" />
                <input type="text" :placeholder="showKeyword" id="search_con" />
            </div>
        </div>
    </my-head>
    <van-swipe :autoplay="4000"  style="width:94%;margin:auto;border-radius:10px;overflow:hidden;margin-top:10px;">
        <van-swipe-item v-for="(image, index) in images" :key="index">
            <img style="width:100%" :src="image.pic" />
        </van-swipe-item>
    </van-swipe>
    <div class="recommend">
         <div class="rtop">
             <h3>推荐歌单</h3>
             <p class="right" @click="gotoALLRecommend">更多></p>
         </div>
         <div class="re">
            <div class="item" @click="gotoDetail(v.id)" v-for="(v,i) in recommend" :key="i">
                <img :src="v.picUrl" alt="">
                <p class="van-multi-ellipsis--l2">{{v.name}}</p>
                <span><van-icon class="icon" name="service-o" />{{v.playCount}}</span>
            </div>
         </div>
    </div>
    <div class="recommend">
         <div class="rtop">
             <h3>精品歌单</h3>
             <p class="right" @click="gotoALLRecommend(1)">更多></p>
         </div>
        <div class="re">
            <div class="item" @click="gotoDetail(v.id)" v-for="(v,index) in quality" :key="index">
                <img :src="v.coverImgUrl" alt="">
                <p class="van-multi-ellipsis--l2">{{v.name}}</p>
                <span><van-icon class="icon" name="service-o" />{{v.playCount}}</span>
            </div>
         </div>
      </div>
  </div>
</template>


<script>
import { mapState,mapMutations } from "vuex";

export default {
    data(){
        return {
            images:[],
            recommend:[],
            quality:[],
            showKeyword:'',
        }
    },
    methods:{
        gotoALLRecommend(i){
            this.$router.push({name:'allrecommend',params:{i}});
        },
        gotoSearch(){
            this.$router.push({name:'search'});
        },
        gotoDetail(id){
            this.$router.push({name:'recommend',params:{id:id}});
        }
    },
    computed:{
        ...mapState(['playerBtm','list','sxy']),
    },
    mounted(){
        this.$refs.find.style.paddingBottom = 50 + parseInt(this.playerBtm) + 'px';
        this.$ajax.getDefault().then(res=>{
            this.showKeyword = res.data.showKeyword;
        })
        this.$ajax.getBanner({
            type:1
        }).then(res=>{
            this.images = res.banners;
        })
        this.$ajax.getRecommentdList({
            limit:6
        }).then(res=>{
            this.recommend = res.result;
        })
        this.$ajax.getQualityList({
            limit:8
        }).then(res=>{
            this.quality = res.playlists;
        })
    },
    watch:{
        playerBtm:function(v){
            this.$refs.find.style.paddingBottom = 50 + parseInt(v) + 'px';
        }
    },
}
</script>


<style lang="scss" scoped>
.find{
    padding-bottom: 95px;
}
.recommend{
    margin: 10px 0;
    padding: 10px 10px;
    color:#000;
    background: #eee;
    border-radius: 10px;
    .rtop{
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        margin-bottom: 5px;
        .right{
            padding: 5px 10px;
            border: 1px solid #ccc;
            border-radius: 15px;
        }
    }
    .re{
        width: 100%;
        height: 10%;
        display: flex;
        overflow: auto;
        .item{
            text-align-last: left;
            font-size: 12px;
            float: left;
            width: 33%;
            height: 100%;
            flex-shrink: 0;
            padding: 2%;
            box-sizing: border-box;
            position: relative;
            img{
                width: 100%;
                height: 100%;
                border-radius: 10px;
            }
            span{
                font-size: 8px;
                position: absolute;
                top: 10px;
                right: 10px;
                color: #fff;
                padding: 5px;
                background: rgba(0,0,0,0.3);
                border-radius: 15px;
                display: flex;
                align-items: center;
                .icon{
                    margin-right: 3px;
                }
            }
        }
    }
}
.search {
    position: fixed;
    z-index: 100;
    top: 8px;
    width: 70%;
    left: 50%;
    transform: translate(-50%);
    background: #fff;
    border-radius: 16px;
  .search_form {
    line-height: 1;
    width: 100%;
    height: 28px;
    background: #f0f0f0;
    border: 1px solid #f0f0f0;
    border-radius: 15px;
    position: relative;
    z-index: 310;
    input {
      border: 0;
      color: #3a3a3a;
      width: 80%;
      text-indent: 15px;
      height: 30px;
      line-height: 30px;
      background: transparent;
      font-size: 14px;
    }
    .icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>